<template>
  <div>
    <el-card class="card">
      <page-tools-top>
        <template #right>
          <el-button type="success" size="small" @click="addMenusDialogFn()">
            添加菜单
          </el-button>
        </template>
      </page-tools-top>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'childs' }"
      >
        <el-table-column prop="title" label="标题">
          <template #default="{ row }">
            <i v-if="row.childs" class="el-icon-folder-opened" />
            <i v-else-if="row.is_point" class="el-icon-view" />
            <i v-else class="el-icon-document" />
            <span style="margin-left: 10px">{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限点代码" />
        <el-table-column label="操作" align="right">
          <template #default="{ row }">
            <el-button
              icon="el-icon-edit"
              circle
              @click="addMenusDialogFn(row.id)"
            /><el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delFn(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <addMenusDialog
      ref="addmenus"
      :dialog-form-visible.sync="dialogFormVisible"
      :table-data="tableData"
      @addMenus="getMenusList"
    />
  </div>
</template>

<script>
import { getUserInfoApi } from '@/api/user'
import { getMenusListApi, delMenusApi } from '@/api/menus'
import addMenusDialog from './components/addMenusDialog.vue'
export default {
  components: {
    addMenusDialog
  },
  data() {
    return {
      tableData: [],
      dialogFormVisible: false, // 新增菜单弹窗
      rolesList: [], // 权限点列表
      menusList: [] // 菜单列表
    }
  },
  async created() {
    const { data: data1 } = await getUserInfoApi()
    this.rolesList = data1.roles.points
    this.menusList = data1.roles.menus
    this.getMenusList()
  },
  methods: {
    async getMenusList() {
      const { data: data2 } = await getMenusListApi()
      this.tableData = data2
      this.tableData.forEach((item) => {
        if (item.childs) {
          item.childs.forEach((ite) => {
            if (ite.points) {
              ite.childs = ite.points
            }
          })
        }
      })
    },
    addMenusDialogFn(id) {
      this.$refs.addmenus.openDialog(id)
      this.dialogFormVisible = true
    },
    async delFn(id) {
      this.$confirm('你确认要进行删除么?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delMenusApi(id)
          if (this.tableData.length === 1 && this.page > 1) {
            this.page--
          }
          this.$message.success('删除操作成功')
          this.getMenusList()
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}
</script>

<style lang="scss">
.card {
  margin: 20px;
}
</style>
